<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>群聊</template>
            <template #right><i class="iconfont icon-sousuo" @click="handleShowSearchPopup"></i></template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 列表区域开始 -->
        <div class="list-wrap">
            <!-- 骨架屏区域 -->
            <TridentCellSkeleton
                v-if="isSkeleton"
                v-for="(index) in 7" :key="index"
                :isLeftSecondRow="false"
                :isRight="false"
                width="65px"
                height="65px"
            />

            <template v-if="groupChatList.length > 0">
                <div v-for="(item, index) in groupChatList" :key="index" @click="$router.push('/chat?is_open=1&mode=2&gid=' + item.id)">
                    <TridentGroupChatItem  :item="item" :is_arrows="false"/>
                </div>
            </template>

            <template v-else>
                <TridentEmpty v-if="!loading" message="暂无群聊"/>
            </template>

            <!-- 返回顶部区域开始 -->
            <van-back-top bottom="100" right="10"><i class="iconfont icon-top" style="font-size: 30px;"></i></van-back-top>
        </div>
        <!-- 列表区域结束 -->

        <!-- 搜索弹层区域开始 -->
        <van-popup
            v-model:show="showPopup"
            closeable
            round
            position="bottom"
            :style="{ height: '15%' }"
            :overlay="false"
        >
            <div class="search-wrap">
                <van-search
                    v-model="params.name"
                    show-action
                    placeholder="搜索"
                >
                    <template #action>
                        <div @click="handleSearch">搜索</div>
                    </template>
                </van-search>
            </div>
        </van-popup>
        <!-- 搜索弹层区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { reqGroupChatListAPI } from '@/apis/groupChat'
import type { GroupChat, GroupChatListParams } from '@/types/groupChat'
import { onMounted, ref } from 'vue'


// 骨架屏
const isSkeleton = ref<boolean>(false)

// 加载中
const loading = ref<boolean>(false)

onMounted(async() => {
    await getGroupChat()
})

// ----------------- 处理搜索群聊开始 -----------------
// 搜索弹层卡关
const showPopup = ref<boolean>(false)

// 显示搜索群聊弹层
const handleShowSearchPopup = () => {
    showPopup.value = true
}

// 搜索群聊
const handleSearch = () => {
    getGroupChat()
}
// ----------------- 处理搜索群聊结束 -----------------



// ------------------- 处理群聊开始 -------------------
// 群聊列表
const groupChatList = ref<GroupChat[]>([])

// 获取群聊列表参数
const params = ref<GroupChatListParams>({
    is_my: 1,
    name: '',
    page: 1
})

// 获取群聊列表
const getGroupChat = async () => {
    isSkeleton.value = true
    const result = await reqGroupChatListAPI(params.value)
    groupChatList.value = result.data.group_chats
    isSkeleton.value = false
}
// ------------------- 处理群聊结束 -------------------
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;
    .list-wrap {
        padding-top: 45px;
    }

    .search-wrap {
        margin-top: 40px;
    }
}
</style>